import React, {memo, useEffect, useState} from "react";
import MineIndexStyle from "./IndexStyle";
import {NavLink, Outlet, useNavigate} from "react-router-dom";
import {getUserDetailsByIdApi} from "../../services/user";
import {UserVO} from "../../interface/UserInterface";
import {Button} from "antd";

/**
 * 时间 2024年1月24日 17点28分
 * 关于我的音乐页面
 * 我的音乐需要考虑两种情况,
 * 登录的用户是 普通用户 还是 歌手
 * 所以我们就需要根据请求动态渲染DOM页面
 * 关于需要动态渲染的组件,我们统一使用方法进行渲染
 * 其函数命名规则为 : XXXRenderingDOM
 *
 */
type propsType={

}

export default memo(function MineIndex(props:propsType) {
  const [userObj,setUserObj]=useState<UserVO>();
  /** 用户id */
  const userId:number=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  //路由跳转
  const navigate=useNavigate();
  /** 页面初始化数据 */
  useEffect(() => {
    //获取用户信息
    getUserDetailsByIdApi(userId).then((result:any)=>{
      setUserObj(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <MineIndexStyle $cover={userObj?.cover}>

      <div className="mine-head-box">
        <div className="mine-head-box-mask"></div>

            <div className="mine-head-user-box">
              {
                userId?
                  <>
                    <div className="user-cover"></div>
                    <div className="user-message">
                      <div className="user-nickname">{userObj?.nickname}</div>
                      <div className="user-motto">{userObj?.introduction}</div>
                      {/*<ul className="user-other-info-ul">*/}
                      {/*  <li>*/}
                      {/*    <div className="user-other-li-number">100</div>*/}
                      {/*    <div className="user-other-li-title">粉丝</div>*/}
                      {/*  </li>*/}
                      {/*  <li>*/}
                      {/*    <div className="user-other-li-number">120</div>*/}
                      {/*    <div className="user-other-li-title">关注</div>*/}
                      {/*  </li>*/}
                      {/*  <li>*/}
                      {/*    <div className="user-other-li-number">3</div>*/}
                      {/*    <div className="user-other-li-title">创建的歌单</div>*/}
                      {/*  </li>*/}
                      {/*</ul>*/}
                    </div>
                  </>
                  :
                  <Button  className="login-btn" onClick={()=>{
                    navigate("/login");
                  }}>立即登录</Button>
              }
            </div>
      </div>
      <ul className="mine-head-nav-box">
        <li><NavLink end to="/mine" >我喜欢</NavLink></li>
        <li><NavLink end to="/mine/follow">关注</NavLink></li>
        <li><NavLink end to="/mine/fans">粉丝</NavLink></li>
        <li><NavLink end to="/mine/songsheet">歌单</NavLink></li>
        <li><NavLink end to="/mine/album">专辑</NavLink></li>
      </ul>
      <div className="mine-content-box">
        <Outlet/>
      </div>
    </MineIndexStyle>
  );
});
